/* eslint-disable */
import React from "react";
import Chart from "echarts-for-react";
import style from "./Echarts_tu.less";
import echarts from 'echarts';

class Echarts_baojing extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            xianzhi: 0,
            dataList: [],
            timeList: []
        }



    }

    componentDidMount() {
        // console.log(this.props,123)
        this.setState({
            dataList:this.props.dataList,
            timeList:this.props.timeList,
        })
    }

    componentWillReceiveProps(nextProps) {
        console.log(nextProps,123)
    }





    setOption = () => {

        return {

            tooltip: {
                trigger: 'axis',

            },
            legend: {

                top: '30',

                bottom: '10'

            },

            grid: {
                top: "6%",
                left: '3%',
                right: '6%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    position: 'top',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff'
                        },
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#333" //X轴文字颜色
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#ddd6d0'
                        },
                        interval: 0,
                    },

                    data: this.state.timeList
                },

            ],
            dataZoom: [{
                type: 'slider',
                xAxisIndex: 0,
                filterMode: 'filter',
                start: 0,
                end: 100,
                backgroundColor: 'rgba(0,160,235,0.5)',
                fillerColor: 'rgba(255, 255, 255, 1)'

            }
                , {
                type: 'inside',
                xAxisIndex: 0,
                filterMode: 'filter',
                start: 0,
                end: 100

            }, {
                type: 'inside',
                yAxisIndex: 0,
                filterMode: 'filter',
                start: 0,
                end: 100

            }],
            yAxis: [
                {
                    type: 'value',
                    boundaryGap: true,
                    axisLabel: {
                        // formatter: '{value} ',
                        show: true,

                    },
                    position: 'left',
                    name: "",
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },

                    // axisLine: {
                    //     show: true,
                    //     lineStyle: {
                    //         color: '#000'
                    //     }
                    // }
                }

            ],

            series: [
                {
                    name: "历史数据",
                    type: 'line',
                    yAxisIndex: 0,
                    smooth: true,
                    showSymbol: false,//控制节点显示
                    lineStyle: {
                        color: '#00A0EB',

                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(74,187,240,1)'
                            },
                            {
                                offset: 1,
                                color: '#3fbbff0d'
                            }
                            ], false),
                        }
                    },
                    data: this.state.dataList

                },

            ]
        }



    }

    render() {
        // console.log(this.props)
        return (

            <Chart option={this.setOption()} notMerge lazyUpdate className={style.main}
                style={{ height: 290 }}
                ref={(e) => { this.echarts_react = e; }}
            />




        );
    }

}

export default Echarts_baojing;
